<template>
  <div class="hello">
    <v-chart class="chart" :options="polar"/>
    <input type="file" @change="getExcel">
    <table class="table table-striped">
				<thead><tr>
					<th v-for="c in cols" :key="c.key">{{c.name}}</th>
				</tr></thead>
				<tbody>
					<tr v-for="(r, key) in data" :key="key">
						<td v-for="c in cols" :key="c.key"> {{ r[c.key] }}</td>
					</tr>
				</tbody>
			</table>
  </div>
</template>

<script>
import xlsx from 'xlsx';
export default {
  name: 'HelloWorld',
  data () {
    return {
      i: 1,
      cols: [],
      data: [],
      picData: [
        {
          name: '中国',
          value: 10,
          add: 15
        },
        {
          name: '加拿大',
          value: 2000,
          add: 4
        },
        {
          name: '英国',
          value: 4000,
          add: 4
        },
        {
          name: '俄罗斯',
          value: 8000,
          add: 0.5
        },
        {
          name: '法国',
          value: 3000,
          add: 4
        },
        {
          name: '德国',
          value: 1000,
          add: 6
        },
        {
          name: '日本',
          value: 900,
          add: 7
        },
        {
          name: '美国',
          value: 15000,
          add: 7
        }
      ],
      polar: {
        color: ['#009ddc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {},
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '1955',
            type: 'bar',
            barGap: 0,
            label: {
              normal: {
                show: true,
                position: 'insideBottom',
                rotate: 90,
                textStyle: {
                  align: 'left',
                  verticalAlign: 'middle'
                }
              }
            },
            data: []
          }
        ]
      },
      gdpData: [],
      gIndex: 1,
      timer: ''
    };
  },
  mounted () {
    this.init();
  },
  methods: {
    init () {
      // let vm = this;
      // vm.getData();
      // vm.add();
    },
    getData () {
      let vm = this,
        _nameData = [],
        _valData = [];
      vm.picData.forEach(item => {
        _nameData.push(item.name);
        _valData.push(item.value);
      });
      vm.polar.series[0].data = _valData;
      vm.polar.xAxis[0].data = _nameData;
    },
    sortNumber (a, b) {
      // return a.value - b.value;
      return a - b;
    },
    add () {
      let vm = this;
      vm.picData.forEach((item, i) => {
        vm.picData[i].value = parseInt(item.value + 5 * item.add);
      });
      vm.picData = vm.picData.sort(vm.sortNumber);
      vm.i = vm.i + 1;
      if (vm.i % 4 === 0) {
        vm.polar.series[0].name = parseInt(vm.polar.series[0].name) + 1;
      }
      vm.getData();
      setInterval(() => {
        vm.add();
      }, 100);
    },
    getExcel (event) {
      let reader = new FileReader(), vm = this;
      reader.onload = (e) => {
        let wb = xlsx.read(e.target.result, {
          type: 'binary'
        });
				const wsname = wb.SheetNames[0], ws = wb.Sheets[wsname];
				/* Convert array of arrays */
        vm.data = xlsx.utils.sheet_to_json(ws, {header: 1});
        vm.cols = vm.make_cols(ws['!ref']);
        console.log(vm.data);
        vm.gdpData = [
          vm.data[5],
          vm.data[6],
          vm.data[7]
        ];
        vm.gIndex = vm.data[5].length - 1;
          console.log(vm.timer);
        vm.timer = setInterval(() => {
          vm.getGdpData();
          if (vm.gIndex === 0) {
            clearInterval(vm.timer);
          }
        }, 100);
      };
      reader.readAsBinaryString(event.target.files[0]);
    },
    getGdpData () {
      let vm = this,
        _nameData = [],
        _valData = [];
      vm.gdpData.forEach((item, i) => {
        _nameData.push(item[0]);
        _valData.push(item[vm.gIndex]);
      });
      vm.gIndex = vm.gIndex - 1;
      vm.polar.series[0].data = _valData;
      vm.polar.xAxis[0].data = _nameData;
    },
    make_cols (refstr) {
      return Array(xlsx.utils.decode_range(refstr).e.c + 1).fill(0).map(
        (x, i) => (
          {
            name: xlsx.utils.encode_col(i),
            key: i
          }
        )
      );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.chart {
  width: 1000px;
  background: #fff;
}
</style>
